<template>
  <div>
    <div>
      <el-form :inline="true" :model="deviceLike" class="demo-form-inline">
        <el-row>
          <el-col :span="8">
            <el-form-item>
              设备名称
              <el-select v-model="deviceLike.name" placeholder="请选择" size="mini" style="width: 70%;">
                <el-option v-for="device in nameList" :key="device.id" :label="device.name" :value="device.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              购买人<el-input v-model="deviceLike.buyman" size="mini" style="width: 80%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item>
              <el-button size="mini" type="primary" @click="selectLike()">查询</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item>
              <el-button size="mini" type="primary" @click="clear()">清空</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-form-item>
              <el-button size="mini" type="primary" @click="exportBackExcel()">导出数据</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <el-table :data="deviceList" border style="width: 100%">
        <el-table-column fixed prop="date" label="添加反馈" width="100">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" circle @click="getOne(scope.row.id)">
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="buydate" label="购买日期" width="150">
        </el-table-column>
        <el-table-column prop="no" label="设备编号" width="150">
        </el-table-column>
        <el-table-column prop="name" label="设备名称" width="150">
        </el-table-column>
        <el-table-column prop="description" label="设备描述" width="150">
        </el-table-column>
        <el-table-column prop="buysum" label="采购数量" width="150">
        </el-table-column>
        <el-table-column prop="money" label="采购金额" width="150">
        </el-table-column>
        <el-table-column prop="buyman" label="采购人" width="150">
        </el-table-column>
        <el-table-column prop="realprice" label="实际单价" width="150">
        </el-table-column>
        <el-table-column prop="realbuycount" label="实际购买量" width="150">
        </el-table-column>
        <el-table-column prop="realcost" label="实际花费" width="150">
        </el-table-column>
        <el-table-column prop="dec" label="反馈" width="150"> </el-table-column>
        <el-table-column prop="status" label="反馈状态" width="150">
        </el-table-column>
      </el-table>
      <div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-sizes="[8, 15, 20, 30]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="修改反馈" :visible.sync="dialogFormVisible">
      <el-form :model="device">
        <el-form-item label="反馈" :label-width="formLabelWidth">
          <el-input v-model="device.dec" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="setOne()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "120px",
      device: {},
      deviceLike: {
        name: "",
        buyman: "",
      },
      deviceList: [],
      nameList: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 8,
      },
    };
  },
  methods: {
    exportBackExcel() {
      this.$axios.get("/buycheck/exportBackExcel", { responseType: 'arraybuffer' })
        .then((result) => {
          let blob = new Blob([result.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
          let link = document.createElement("a");
          let url = window.URL.createObjectURL(blob);
          link.href = url;
          link.download = '采购反馈表.xls';
          link.click();
          window.URL.revokeObjectURL(url);
        }).catch((err) => {
          console.log(err);
        });
    },
    getOne(id) {
      this.dialogFormVisible = true;
      this.$axios
        .get("buycheck/getOne?id=" + id)
        .then((result) => {
          let vo = result.data;
          if (vo.code == 200) {
            this.device = vo.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    setOne() {
      this.$axios
        .get("buycheck/setOne?id=" + this.device.id + "&dec=" + this.device.dec)
        .then((result) => {
          let vo = result.data;
          if (vo.code == 200) {
            this.deviceList = vo.data.list;
          }
          this.list();
        })
        .catch((err) => {
          console.log(err);
        });
      this.dialogFormVisible = false;
    },
    clear() {
      this.deviceLike.name = '';
      this.deviceLike.buyman = '';
      this.list();
    },
    selectLike() {
      this.$axios
        .get(
          "buycheck/selectLike?name=" +
          this.deviceLike.name +
          "&buyman=" +
          this.deviceLike.buyman +
          "&pageNum=" +
          this.pageInfo.pageNum +
          "&pageSize=" +
          this.pageInfo.pageSize
        )
        .then((result) => {
          this.$message(result.data.message);
          let vo = result.data;
          if (vo.code == 200) {
            this.deviceList = vo.data.list;
            this.pageInfo = vo.data;
            for (let i = 0; i < this.deviceList.length; i++) {
              this.deviceList[i].buydate = this.deviceList[i].buydate.substring(0, 10);
            }
          }
          this.dialogFormVisible = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.list();
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val;
      this.list();
    },
    list() {
      this.$axios
        .get(
          "buycheck/selectBuyCheckAll?pageNum=" +
          this.pageInfo.pageNum +
          "&pageSize=" +
          this.pageInfo.pageSize
        )
        .then((result) => {
          let vo = result.data;
          if (vo.code == 200) {
            this.deviceList = vo.data.list;
            this.pageInfo = vo.data;
            for (let i = 0; i < this.deviceList.length; i++) {
              this.deviceList[i].buydate = this.deviceList[i].buydate.substring(0, 10);
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

  mounted() {
    this.list();
    this.$axios
      .get(
        "base/selectBaseStockAll?pageNum=1&pageSize=100"
      )
      .then((result) => {
        let vo = result.data;
        if (vo.code == 200) {
          this.nameList = vo.data.list;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style>
.left-aligned {
  float: left;
  margin-right: 10px;
  /* 如果你需要一些间距 */
}
</style>